<!DOCTYPE html>
 <!-- thymeleaf追加 -->
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>悦生活</title>
		<!-- 元语言 -->
		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href=" ../../css/sm.min.css">
		<link rel="stylesheet" href=" ../../css/sm-extend.min.css">
		<!-- vue追加 -->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
		<!-- vue的AJAX追加 -->
		 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
		<!-- css的使用-->
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page">
		<div id="app"> <!-- vue -->
			<!-- 标题栏 -->
			<header class="bar bar-nav">
				<a class="button button-link button-nav pull-left" href="../order/commentOrder.html">
					<span class="icon icon-left"></span>
				</a>
				<!-- 社区入口 -->
				<h1 class="title">订单详情</h1>
			</header>



			<!-- 工具栏 -->
			<nav class="bar bar-tab">	
				<a class="tab-item external" href="../../shop_index.html">
					<span class="icon icon-home"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="../chat/chat.html">
					<span class="icon icon-friends"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external" href="../cart/cart.html">
					<span class="icon icon-cart"></span>
					<span class="tab-label">购物车</span>
				</a>
				<a class="tab-item external" href="../user/userCenter.html">
					<span class="icon icon-me"></span>
					<span class="tab-label">我的购物</span>
				</a>
			</nav>

			<!-- 这里是页面内容区 -->
			<div class="content">
				
				 <div class="card">
				    <div class="card-header">订单号:<input type="button" style="font-size: 1px;border: none;background-color: white;" id="orderNumber" /></div>
				    <div class="card-content" id="appendArea">

				    </div>
				    <div class="card-footer">总价:<input type="button"  id="totalPrice" style="color: orangered;border: none;background-color: white;" /></div>
				 </div>
				

			</div>
			
			
			
		</div> <!-- /vue -->	 
		</div>

		<!-- popup, panel 等放在这里 -->
		<div class="panel-overlay"></div>
		<!-- Left Panel with Reveal effect -->
		<div class="panel panel-left panel-reveal">
			<div class="content-block">
				<p>这是一个侧栏</p>
				<p></p>
				<!-- Click on link with "close-panel" class will close panel -->
				<p><a href="#" class="close-panel">关闭</a></p>
			</div>
		</div>
		<!-- 导入js文件 -->
		<script src='../../js/jquery-3.2.1.min.js'></script>
		<script src='../../js/sm.js'></script>
		<script src='../../js/sm-extend.js'></script>
		<script src="../../js/config.js" type="text/javascript" charset="utf-8"></script>
		<!-- VUE的使用 -->
		<script>
		        var app = new Vue({
		            el:"#app",
		            data:{
						arg:"",
		                array:[]
		            },
		            // 方法区
		            methods:{
						//跳转到搜索页面的方法
						 goSearch:function(){ 
						window.location="../shop_search.html"
						},
		            }
		        });
		</script>
		<!-- 初始化js -->
		<script type="text/javascript">
			//获取用户id
			//var userId = "001";
			//初始化方法
			$(function(){
				
				var orderId = getUrlParam('orderId');
				//var orderId = "e9dbdd80-c219-4d87-baab-18a6938e3d82";
				initDetail(orderId);
			
			});	
		</script>
		<!-- 点击js -->
		<script type="text/javascript">
			function initDetail(orderId){
				
				$.get({
				        type: 'get',
				        url: serviceIP+"/shop/initOrderDetail",
				        dataType: 'json',
						data:{orderId : orderId},
				        headers: {
							"token":token,
							"refreshtoken":refreshtoken
						},
				        success:function(d){
						//alert(d.data.data.orderId)
						//充填表头
						$("#orderNumber").val(d.data.data.orderId);
						//充填价格
						$("#totalPrice").val(d.data.data.total)
						
						for (var i = 0; i < d.data.data2.length; i++) {
							
							var orderItem = "<div class='card-content-inner'>"+
											  "<<img src='../../img/qihoo.png' ><br>"+
												"商品名字:"+d.data.data2[i].name+"<br>"+
												"配送方式:邮递<br>"+
												"运费险:免费<br>"+
												"店铺优惠:暂无<br>"+
												"开具发票:本次不开具发票<br>"+
												"订单注备:<br/>"+
												"商品数量:"+d.data.data2[i].price+"<br/>"+
												"商品小计:"+d.data.data2[i].subtotal+""+
											"</div>";
											
							$("#appendArea").append(orderItem);

						}
						
					}
					
				})
				
			}
		</script>
		<!-- 方法js -->
		<script type="text/javascript">
			
		</script>
		<!-- auxiliary js -->
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
	</body>
</html>
